<template>
    <div class="dataSync pl10 pr10 ">
        <!-- 快捷搜索 -->
        <el-tabs v-model="tabIndex" @tab-click="clickTabs" style="height:56px;">
            <el-tab-pane :label="tab.name + (tab.num ? `(${tab.num})` : '')" :key="tabI" v-for="(tab, tabI) in tabbars"></el-tab-pane>
        </el-tabs>

        <avue-crud
            :table-loading="loading"
            :data="data[currentRole]"
            :option="option[currentRole]"
            :page.sync="page"
            @on-load="onLoad"
            @search-change="handleSearchChange"
            :search.sync="searchForm"
        >
            <template slot-scope="scope" slot="menuRight">
                <sc-pop-button title="点击确认同步数据" type="primary" size="mini">同步</sc-pop-button>
                <el-button type="warning" size="mini">数据源</el-button>
            </template>
            <template slot="role" slot-scope="scope">
                <el-tag>{{ scope.row.role }}</el-tag>
            </template>
        </avue-crud>
    </div>
</template>
<script>
    const crudConfig = window.avueCrud;
    import page from "admin/mixins/page";

    export default {
        mixins: [page],
        name: "DataSync",
        components: {},
        data() {
            return {
                search: {},
                data: {
                    teacher: [],
                    parent: [],
                    student: []
                },
                option: {
                    teacher: {
                        column: [
                            {
                                label: "姓名",
                                prop: "name",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            },
                            {
                                label: "部门",
                                prop: "department",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            },
                            {
                                label: "角色",
                                prop: "role"
                            },
                            {
                                label: "手机号",
                                prop: "phone"
                            }
                        ],
                        ...crudConfig
                    },
                    parent: {
                        column: [
                            {
                                label: "姓名",
                                prop: "name",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            },
                            {
                                label: "绑定学生信息",
                                prop: "userInfo"
                            },
                            {
                                label: "手机号",
                                prop: "phone",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            }
                        ],
                        ...crudConfig
                    },
                    student: {
                        column: [
                            {
                                label: "年级",
                                prop: "grade",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            },
                            {
                                label: "班级",
                                prop: "class",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            },
                            {
                                label: "学生姓名",
                                prop: "name",
                                search: true,
                                searchSize: "mini",
                                searchSpan: 5,
                                searchGutter: 5
                            }
                        ],
                        ...crudConfig
                    }
                },
                tabIndex: 0,
                tabbars: [
                    // { name: "全部", num: "" },
                    {name: "教职工", num: "1000"},
                    {name: "家长", num: "500"},
                    {name: "学生", num: "100"}
                ],

                //分页
                searchForm: {
                    name: "",
                    department: "",
                    phone: "",
                    role: ""
                },
                urls: {
                    0: "schoolConfig",
                    1: "classCircleList",
                    2: "handleDelete"
                }
            };
        },
        computed: {
            // 当前显示栏目信息信息
            currentRole: {
                get() {
                    switch (+this.tabIndex) {
                        case 0:
                            return "teacher";
                        case 1:
                            return "parent";
                        case 2:
                            return "student";
                    }
                }
            }
        },
        methods: {
            /**
             * 获取数据完成回调
             * @param resData 接口返回的data
             * @returns {Promise<void>}
             */
            async dataCallBack(resData) {
                let data = [];
                let obj = {};
                switch (+this.tabIndex) {
                    case 0:
                        obj = {
                            name: "望夏雨",
                            department: "教务处",
                            phone: "13522322233",
                            role: "班主任"
                        };

                        break;
                    case 1:
                        obj = {
                            name: "望夏雨",
                            userInfo: "叶常青、九年级（5）班",
                            phone: "13522322233"
                        };
                        break;
                    case 2:
                        obj = {
                            name: "周洁仔",
                            grade: "九年级",
                            class: "（5）班"
                        };
                        break;
                }
                for (let j = 0; j < this.page.pageSize; j++) {
                    data.push({id: j, ...obj});
                }
                this.data[this.currentRole] = data;
            },
            // 加载数据
            async clickTabs(tab, event) {
                //接口区分
                switch (+this.tabIndex) {
                    case 0:
                        this.urls = {
                            0: "schoolConfig",
                            1: "classCircleList",
                            2: "handleDelete"
                        };
                        break;
                    case 1:
                        this.urls = {
                            0: "schoolConfig",
                            1: "classCircleList",
                            2: "handleEdit"
                        };
                        break;
                    case 2:
                        this.urls = {
                            0: "schoolConfig",
                            1: "classCircleList",
                            2: "handleDelete"
                        };
                        break;
                }
                // 调取接口
                this.loading = true;
                this.page.currentPage = this.searchForm.page = 1;
                await this.getData(this.searchForm);
                this.loading = false;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .dataSync {
    }
</style>
